<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网首页</title>
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="style.css">
    <!-- 引入js -->
    <script src="script.js"></script>
</head>

<body>
    <!-- 顶部图片开始 -->
    <div class="top-tu">
        <a href="#"><img src="images/top.jpg" alt=""></a>
    </div>
    <!-- 顶部图片结束 -->
    <!-- 导航栏开始 -->
    <div class="top-nav">
        <div class="top-nav-bd w">
            <div class="top-left">
                <ul>
                    <li><a href="#">小米商城</a></li>
                    <li>|</li>
                    <li><a href="#">MIUI</a></li>
                    <li>|</li>
                    <li><a href="#">loT</a></li>
                    <li>|</li>
                    <li><a href="#">云服务</a></li>
                    <li>|</li>
                    <li><a href="#">金融</a></li>
                    <li>|</li>
                    <li><a href="#">有品</a></li>
                    <li>|</li>
                    <li><a href="#">小爱开发平台</a></li>
                    <li>|</li>
                    <li><a href="#">企业团购</a></li>
                    <li>|</li>
                    <li><a href="#">资质证照</a></li>
                    <li>|</li>
                    <li><a href="#">协议规则</a></li>
                    <li>|</li>
                    <li><a href="#" id="app">下载app</a>
                    </li>
                    <li>|</li>
                    <li><a href="#">智能生活</a></li>
                    <li>|</li>
                    <li><a href="#">Select Location</a></li>
                </ul>
            </div>

            <a href="#" class="app-tu">
                <img src="images/app.png" alt="">
                <div class="apptext">
                    小米商城app
                </div>
                <div class="sanjiao">
                </div>
            </a>
            <div class="top-right">
                <a href="#" class="top-right2">购物车(0)</a>
                <div class="car">
                    购物车中还没有商品，赶紧选购吧！
                </div>
                <div class="top-right1">
                    <ul>
                        <li><a href="#">登陆</a></li>
                        <li>|</li>
                        <li><a href="#">注册</a></li>
                        <li>|</li>
                        <li><a href="#">消息通知</a></li>
                </div>

            </div>
        </div>
    </div>
    <!-- 导航栏结束  -->
    <div class="header w">
        <div class="pic">
            <a href="#" class="app-pic">
                <img src="images/mi2.png" alt="">
                <img src="images/mi1.png" alt="">
            </a>
        </div>
        <div class="header-bd">
            <ul>
                <li><a href="#">小米手机666</a></li>
                <li><a href="#">Redmi 红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>
        <div class="xlb">
            <ul class="w xialabiao">
                <li><a href="#">
                        <img src="images/xia1.webp" alt="">
                        <p>Remimi k30 至尊纪念版</p><span>1999元起</span>
                    </a>
                </li>
                <li><a href="#">
                        <img src="images/xia2.webp" alt="">
                        <p>Remimi k30 Pro系列</p><span>2999元起</span>
                    </a>
                </li>
                <li><a href="#">
                        <img src="images/xia3.webp" alt="">
                        <p>Remimi k30 系列</p><span>1399元起</span>
                    </a>
                </li>
                <li><a href="#">
                        <img src="images/xia4.webp" alt="">
                        <p>Remimi 10X</p><span>999元起</span>
                    </a>
                </li>
                <li><a href="#">
                        <img src="images/xia5.webp" alt="">
                        <p>Remimi Note 8</p><span>899元起</span>
                    </a>
                </li>
                <li><a href="#">
                        <img src="images/xia1.webp" alt="" class="xiaochu">
                        <p>Remimi 9</p><span>799元起</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="header-search">
            <input type="text" value="家电">
            <button></button>
            <ul>
                <li>小米10</li>
                <li>Redmi k30 Pro</li>
                <li>卡丁车</li>
                <li>耳机</li>
                <li>全部商品</li>
                <li>空调</li>
                <li>净水器</li>
            </ul>
        </div>
    </div>
    <!-- 导航栏结束 -->
    <!-- banner开始 -->
    <div class="bannerbox">
        <div class="beijing">
            <a href="javascript:;" class="arrow1">&lt</a>
            <a href="javascript:;" class="arrow2">&gt</a>
            <ul class="beijing-pic">
                <li><a href="javascript:;"><img src="images/beijing/beijing1.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/beijing/beijing2.webp" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/beijing/beijing3.webp" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/beijing/beijing4.webp" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/beijing/beijing5.webp" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/beijing/beijing6.webp" alt=""></a></li>
            </ul>
            <ol class="circle">
            </ol>>
        </div>

        <ul class="bannerleft">
            <li><a href="#">手机 电话卡</a></li>
            <li><a href="#">电视 盒子</a></li>
            <li><a href="#">笔记本 显示器</a></li>
            <li><a href="#">家电 插线板</a></li>
            <li><a href="#">出行 穿戴</a></li>
            <li><a href="#">智能 路由器</a></li>
            <li><a href="#">电源 配件</a></li>
            <li><a href="#">健康 儿童</a></li>
            <li><a href="#">耳机 音响</a></li>
            <li><a href="#">生活 箱包</a></li>
        </ul>
        <ul class="cela">
            <li class="text"><a href="#"><img src="images/cela/cela1.webp" alt=""><span>冰箱</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela2.webp" alt=""><span>微波炉</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela3.jpg" alt=""><span>电磁炉</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela4.jpg" alt=""><span>插线板</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela5.png" alt=""><span>立式空调</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela6.webp" alt=""><span>电烤箱</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela7.jpg" alt=""><span>电水壶</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela8.jpg" alt=""><span>新风机</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela9.png" alt=""><span>壁挂空调</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela10.jpg" alt=""><span>扫地机器人</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela11.jpg" alt=""><span>滤水壶</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela12.jpg" alt=""><span>电暖器</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela13.png" alt=""><span>滚筒洗衣机</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela14.jpg" alt=""><span>吸尘器</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela15.png" alt=""><span>落地风扇</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela16.jpg" alt=""><span>电压力锅</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela17.jpg" alt=""><span>Redmi全自动洗衣机</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela18.jpg" alt=""><span>空气净化器</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela19.png" alt=""><span>投影仪</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela20.jpg" alt=""><span>料理机</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela21.jpg" alt=""><span>净水器</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela22.jpg" alt=""><span>电饭煲</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela23.jpg" alt=""><span>灯具</span></a></li>
            <li class="text"><a href="#"><img src="images/cela/cela24.jpg" alt=""><span>电煮壶</span></a></li>
        </ul>
    </div>
    <!-- banner结束 -->
    <!-- 侧边栏开始 -->
    <div class="nav-ce">
        <ul>
            <li class="nav-ce-jingguo"><a href="javascript:;"><span></span>
                    <p>手机app</p>
                </a></li>
            <li><a href="javascript:;"><span></span>
                    <p>个人中心</p>
                </a></li>
            <li><a href="javascript:;"><span></span>
                    <p>售后服务</p>
                </a></li>
            <li><a href="javascript:;"><span></span>
                    <p>人工客服</p>
                </a></li>
            <li><a href="javascript:;"><span></span>
                    <p>购物车</p>
                </a>
            </li>
        </ul>
        <a href="#" class="nav-ce-tu">
            <img src="images/app.png" alt="">
            <div class="nav-ce-text">
                扫码领取新<br>
                人百元礼包
            </div>
        </a>
        <div class="go-top">
            <span></span>
            <p>返回顶部</p>
        </div>
    </div>
    <!-- 侧边栏结束 -->
    <!-- bannerft开始 -->
    <div class="bannerft w">
        <ul class="bannerft-nav">
            <li><a href="javascript:;"><img src="images/bannerft/01.png"alt="">
                    <p>小米秒杀</p>
                </a></li>
            <li><a href="javascript:;"><img src="images/bannerft/02.png" alt="">
                    <p>企业团购</p>
                </a></li>
            <li><a href="javascript:;"><img src="images/bannerft/03.png" alt="">
                    <p>F码通道</p>
                </a></li>
            <li><a href="javascript:;"><img src="images/bannerft/04.png" alt="">
                    <p>米粉卡</p>
                </a></li>
            <li><a href="javascript:;"><img src="images/bannerft/05.png" alt="">
                    <p>以旧换新</p>
                </a></li>
            <li><a href="javascript:;"><img src="images/bannerft/06.png" alt="">
                    <p>话费充值</p>
                </a></li>
        </ul>
        <a href="javascript:;" class="bannerft-img"><img src="images/bannerft/07.jpg" alt=""></a>
        <a href="javascript:;" class="bannerft-img"><img src="images/bannerft/08.jpg" alt=""></a>
        <a href="javascript:;" class="bannerft-img"><img src="images/bannerft/09.jpg" alt=""></a>
    </div>

    <!-- bannerft结束 -->
    <!-- 商品模块开始 -->
    <div class="shangpin-beijing">
        <div class="shangou w">
            <h3>小米闪购</h3>
            <div class="shangou-left">
                <h3 class="changci">24:00 场</h3>
                <img src="images/shandian" alt="">
                <p class="dao-wenzi">距离开始还有</p>
                <h5>
                    <span class="daojishi shi">00</span>:
                    <span class="daojishi fen">00</span>:
                    <span class="daojishi miao">00</span>
                </h5>
            </div>
            
            <div class="shangou-right ">
                <ul>
                    <li class="yi"><a href="javascript::"><img src="images/shangou/1.webp" alt="">
                        <h5>日常元素抽纸 青春版 24包/箱</h5>
                        <h6>精选原生竹浆，健康环保 </h6>
                        <p>27.9元  <del>32.9元</del></p>
                    </a></li>
                    <li class="er"><a href="javascript::"><img src="images/shangou/2.webp" alt="">
                        <h5>米家自动泡沫洗衣机精装套装</h5>
                        <h6>感应出泡，高效清洁 </h6>
                        <p>59元  <del>79元</del></p>
                    </a></li>
                    <li class="san"><a href="javascript::"><img src="images/shangou/4.webp" alt="">
                        <h5>米家扫拖一体机器人 白色</h5>
                        <h6>扫的干净，拖得彻底 </h6>
                        <p>1799元  <del>1999元</del></p></a></li>
                    <li class="si"><a href="javascript::"><img src="images/shangou/3.webp" alt="">
                        <h5>米家声波电动牙刷T500 粉色</h5>
                        <h6>刷的干净，智能护齿 </h6>
                        <p>27.9元  <del>32.9元</del></p></a></li>
                </ul>
            </div>
            <a href="javascript:;" class="tupian"><img src="images/da1.webp" alt=""></a>
        </div>
        <div class="shouji w">
            <h3>手机</h3>
            <div class="shouji-left">
                <img src="images/shouji.webp" alt="">
            </div>
            <div class="shouji-right">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;"><img src="images/shouji/1.webp" alt="">
                            <h4>小米 10 至尊版</h4>
                            <h5>120X 变焦/120W秒充/120Hz屏幕</h5>
                            <p>5299元起</p>
                        </a>
                    </li>
                    <li><a href="javascript:;"><img src="images/shouji/2.webp" alt="">
                            <h4>小米 10 至尊版</h4>
                            <h5>120X 变焦/120W秒充/120Hz屏幕</h5>
                            <p>5299元起</p>
                        </a></li>
                    <li><a href="javascript:;"><img src="images/shouji/3.webp" alt="">
                            <h4>小米 10 至尊版</h4>
                            <h5>120X 变焦/120W秒充/120Hz屏幕</h5>
                            <p>5299元起</p>
                        </a></li>
                    <li class="test"><a href="javascript:;">
                        <img src="images/shouji/4.webp" alt="">
                            <h4>小米 10 至尊版</h4>
                            <h5>120X 变焦/120W秒充/120Hz屏幕</h5>
                            <p>5299元起</p>
                        </a></li>
                    <li><a href="javascript:;"><img src="images/shouji/5.webp" alt="">
                            <h4>小米 10 至尊版</h4>
                            <h5>120X 变焦/120W秒充/120Hz屏幕</h5>
                            <p>5299元起</p>
                        </a></li>
                    <li><a href="javascript:;"><img src="images/shouji/6.webp" alt="">
                            <h4>小米 10 至尊版</h4>
                            <h5>120X 变焦/120W秒充/120Hz屏幕</h5>
                            <p>5299元起</p>
                        </a></li>
                    <li><a href="javascript:;"><img src="images/shouji/7.webp" alt="">
                            <h4>小米 10 至尊版</h4>
                            <h5>120X 变焦/120W秒充/120Hz屏幕</h5>
                            <p>5299元起</p>
                        </a></li>
                    <li><a href="javascript:;"><img src="images/shouji/8.webp" alt="">
                            <h4>小米 10 至尊版</h4>
                            <h5>120X 变焦/120W秒充/120Hz屏幕</h5>
                            <p>5299元起</p>
                        </a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 商品模块结束 -->
    <!-- 底边栏开始 -->
    <div class="foot w">
        <ul class="foot-top">
            <li><a href="javascript:;"> 预约维修服务</a></li>
            <li>|</li>
            <li><a href="javascript:;"> 7天无理由退货</a></li>
            <li>|</li>
            <li><a href="javascript:;"> 15天免费换货</a></li>
            <li>|</li>
            <li><a href="javascript:;"> 满99元包邮</a></li>
            <li>|</li>
            <li><a href="javascript:;"> 520家售后网点</a></li>
        </ul>
        <div class="foot-bd">
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">账户管理</a></dd>
                <dd><a href="#">购物指南</a></dd>
                <dd><a href="#">订单操作</a></dd>
            </dl>
            <dl>
                <dt>服务支持</dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">自助服务</a></dd>
                <dd><a href="#">相关下载</a></dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd><a href="#">小米之家</a></dd>
                <dd><a href="#">服务网点</a></dd>
                <dd><a href="#">授权体验店</a></dd>
            </dl>
            <dl>
                <dt>关于小米</dt>
                <dd><a href="#">了解小米</a></dd>
                <dd><a href="#">加入小米</a></dd>
                <dd><a href="#">投资者关系</a></dd>
                <dd><a href="#">企业社会责任</a></dd>
                <dd><a href="#">廉洁举报</a></dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd><a href="#">新浪微博</a></dd>
                <dd><a href="#">官方微信</a></dd>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">公益基金会</a></dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd><a href="#">F 码通道</a></dd>
                <dd><a href="#">礼物码</a></dd>
                <dd><a href="#">防伪检测</a></dd>
            </dl>
            <div class="lianxi">
                <h3>400-100-5678 </h3>
                <p>8:00-18:00（仅收市话费）</p>
                <div class="kefu"> 人工客服</div>
                <p>关注小米：</p>
            </div>
        </div>
    </div>
    <!-- 底边栏结束 -->
    <!-- 底部开始 -->
    <div class="dibu">
        <div class="dibu-box w">
            <img src="images/mi1.png" alt="" class="mi">
            <div class="wenzi">
                <ul>
                    <li>小米商城</li>
                    <li>MIUI</li>
                    <li>米家</li>
                    <li>米聊</li>
                    <li>多看</li>
                    <li>游戏</li>
                    <li>政企服务</li>
                    <li>小米天猫商店</li>
                    <li>小米集团隐私政策</li>
                    <li>小米公司儿童信息保护规则</li>
                    <li>小米商城隐私政策</li>
                    <li>小米商城用户协议</li>
                    <li>问题反馈</li>
                    <li class="qingchu">Select Location</li>
                </ul>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
                    （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
                    增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证<br>
                    违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                <img src="images/dibu/1.png" alt="">
                <img src="images/dibu/2.png" alt="">
                <img src="images/dibu/3.png" alt="">
                <img src="images/dibu/4.png" alt="">
                <img src="images/dibu/5.png" alt="">
            </div>
            <h2>
                让全球每一个人都能享受科技带来的美好生活
            </h2>
        </div>
    </div>
</body>

</html>